import { useState, useEffect } from "react"
import { useLocation, useParams, useNavigate, useHref, useSearchParams, ScrollRestoration } from "react-router-dom"
import { Button, Menu } from "antd"

function Demo4() {
    const $router = useNavigate() // 1.跳转路由：利用useNavigate获取路由跳转方法

    // 2.获取当前路由参数： useLocation  useParams
    // pathname是路由地址 query传参时返回 /home           params传参时返回 /home/123/abc
    // search是路由参数   query传参时返回 ?id=1&name=2    params传参时返回 ''
    const { pathname, search, state, hash } = useLocation()

    //  query传参时返回''   params传参时返回 { id: 1, name: 2 }
    const p1 = useParams()

    //  query传参时返回 #/home           params传参时返回 #/home/123/abc
    const p2 = useHref()

    const linkFn = (path, state) => {
        if (state) {
            $router(path, { state }) // 隐式传参
            return
        }
        $router(path)
    }

    // $router(-1) // 后退，返回上一级路由
    // $router(1) // 前进，返回下一级路由

    return (
        <div className="main_box">
            <h1>本案例展示 react路由跳转的使用方式 （路由配置在route目录）</h1>

            <div className="main_row">
                <Button onClick={() => linkFn("/demo61/123/66")}>params传参跳转</Button>
                <Button onClick={() => linkFn("/demo61?name=张三")}>query传参跳转</Button>
                <Button onClick={() => linkFn("/demo61", { name: "张三" })}>state隐式传参跳转</Button>
            </div>

            <div className="main_row">
                <p>1.跳转路由：利用useNavigate获取路由跳转方法, 有3种传参方式：query、params、state隐式传参； params传参需要在路由提前定义参数,3种传参刷新参数都不会丢失 </p>
                <p>2.获取路由：通过useLocation（3种方式都可以，具体参数需要自行截取） 或 useParams（只有params传参才能获取到参数，参数是对象）， </p>
            </div>

            <div className="main_row">
                {/*  路由文档地址 https://baimingxuan.github.io/react-router6-doc/routers/create-browser-router */}
                <div style={{ color: "red" }}>注：当前使用的是配置式路由,通过Outlet实现Vue的router-view效果。嵌套式路由不方便后期做动态路由。</div>

                <p>1.创建配置式路由：有 createBrowserRouter 和 createHashRouter两种方式。通过 RouterProvider 挂载路由</p>
                <p>2.创建组件式路由：通过 BrowserRouter/HashRouter 包裹Routes和Route标签。挂载的时候，直接在app文件使用组件，或者这个路由组件直接叫app组件</p>
                <p>
                    3.内置组件：常用的组件有
                    Routes、Route、Link、NavLink、Navigate、Outlet、ScrollRestoration等，其中Outlet类似Vue的router-view；ScrollRestoration切换路由，重置滚动条(它的回调不知道怎么玩，搞半天没有用)
                </p>
                <p>4.常用hooks: useLocation、 useParams、 useNavigate、useBeforeUnload、useRoutes，具体用法参考文档</p>
            </div>
        </div>
    )
}

export default Demo4
